<template>
    <div>
            <Card>
                <p slot="title">
				    订单详情
			    </p>
                <div>
                    <Form class="step-form" ref="orderData" :model="orderData" :label-width="100">

                        <Row span="24">
                            <i-col span="20" >
                                <FormItem label="订单进度："  label-position="left" :label-width="150">
                                    <Progress :percent="100" status="active">已完成</Progress>
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="12">
                            <i-col span="8" >
                                <FormItem label="订单编号：" label-position="left" :label-width="150">
                                     {{orderData.order_no}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem  label="意向金额：" label-position="left" :label-width="150">
                                     {{orderData.intention_money}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col span="4" >
                                <FormItem  label="品牌名称：" label-position="left" :label-width="150">
                                     {{orderData.source_brand}}
                                </FormItem>
                            </i-col>
                            <i-col span="9" >
                                <FormItem  label="车型：" label-position="left" :label-width="150">
                                   {{orderData.source_model}}
                                </FormItem>
                            </i-col>
                            <i-col span="3" >
                                <FormItem  label="指导价：" label-position="left" :label-width="100">
                                   {{orderData.guidance_price}}
                                </FormItem>
                            </i-col>
                            <i-col span="3" >
                                <FormItem  label="优惠价：" label-position="left" :label-width="100">
                                   {{orderData.price}}
                                </FormItem>
                            </i-col>
                            <i-col span="4" >
                                <FormItem  label="上牌地：" label-position="left" :label-width="100">
                                   {{orderData.province}}-{{orderData.city}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col span="8" >
                                <FormItem  label="下游公司：" label-position="left" :label-width="150">
                                     {{orderData.user_party}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem label="下游个人：" label-position="left" :label-width="150">
                                   {{orderData.user_name}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem  label="联系电话：" label-position="left" :label-width="150">
                                   {{orderData.user_phone}}
                                </FormItem>
                            </i-col>
                        </Row>

                        <Row span="24">
                            <i-col class='small-title' span="2" >
                                支付记录
                            </i-col>
                        </Row>
                        <Row span="24">
                            <div style='margin-top:20px;'>
                                <Table border :columns="pay_columns" :data="pay_data"></Table>
                            </div>
                        </Row>

                        <Row span="24" style="margin-top:25px;">
                            <i-col class='small-title' span="2" >
                                发布车源信息
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col span="8" >
                                <FormItem label="对接人名称：" label-position="left" :label-width="150">
                                     {{offerfollowData.docking_PERSON}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem  label="对接人电话：" label-position="left" :label-width="150">
                                     {{offerfollowData.docking_PHONE}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem  label="对接人职务：" label-position="left" :label-width="150">
                                      {{offerfollowData.docking_POST}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col span="8" >
                                <FormItem label="最终价格：" label-position="left" :label-width="150">
                                     {{offerfollowData.price}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem  label="定金：" label-position="left" :label-width="150">
                                     {{offerfollowData.down_PAYMENT}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem  label="出库费：" label-position="left" :label-width="150">
                                     {{offerfollowData.out_PRICE}}
                                </FormItem>
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col span="8" >
                                <FormItem label="金融详情：" label-position="left" :label-width="150">
                                     {{offerfollowData.finance_INFO}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem  label="保险详情：" label-position="left" :label-width="150">
                                     {{offerfollowData.insurance_INFO}}
                                </FormItem>
                            </i-col>
                            <i-col span="6" >
                                <FormItem  label="是否本人到店：" label-position="left" :label-width="150">
                                    <Radio-group v-model="offerfollowData.is_WENT_STORE">
                                        <Radio :label="0">否</Radio>
                                        <Radio :label="1">是</Radio>
                                    </Radio-group>
                                </FormItem>
                            </i-col>
                        </Row>

                        <Row span="24">
                            <i-col class='small-title' span="2" >
                                验车图片
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col span="3">
                                <FormItem label="前侧图片：" prop="img_url" label-position="left" :label-width="150">
                                </FormItem>
                            </i-col>
                            <i-col span="5">
                                <template>
                                    <div class="demo-upload-list" v-for="item in uploadList">
                                        <img :src="item.imgUrl">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                            
                                        </div>
                                    </div>
                                    
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                    </Modal>
                                </template>
                            </i-col>
                            <i-col span="3">
                                <FormItem label="车尾图片：" prop="img_url" label-position="left" :label-width="150">
                                </FormItem>
                            </i-col>
                            <i-col span="5">
                                <template>
                                    <div class="demo-upload-list" v-for="item in uploadCWList">
                                        <img :src="item.imgUrl">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                            
                                        </div>
                                       
                                    </div>
                                    
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                    </Modal>
                                </template>
                            </i-col>
                            <i-col span="3">
                                <FormItem label="左侧图片：" prop="img_url" label-position="left" :label-width="150">
                                </FormItem>
                            </i-col>
                            <i-col span="5">
                                <template>
                                    <div class="demo-upload-list" v-for="item in uploadZCList">
                                        <img :src="item.imgUrl">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                            
                                        </div>
                                       
                                    </div>
                                    
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                    </Modal>
                                </template>
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col span="3">
                                <FormItem label="右侧图片：" prop="img_url" label-position="left" :label-width="150">
                                </FormItem>
                            </i-col>
                            <i-col span="5">
                                <template>
                                    <div class="demo-upload-list" v-for="item in uploadYCList">
                                        <img :src="item.imgUrl">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                       
                                        </div>
                                       
                                    </div>
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                    </Modal>
                                </template>
                            </i-col>
                            <i-col span="3">
                                <FormItem label="座椅图片：" prop="img_url" label-position="left" :label-width="150">
                                </FormItem>
                            </i-col>
                            <i-col span="5">
                                <template>
                                    <div class="demo-upload-list" v-for="item in uploadZYList">
                                        <img :src="item.imgUrl">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        </div>
                                    </div>
                            
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                    </Modal>
                                </template>
                            </i-col>
                            <i-col span="3">
                                <FormItem label="车架号图片：" label-position="left" :label-width="150">
                                </FormItem>
                            </i-col>
                            <i-col span="5">
                                <template>
                                    <div class="demo-upload-list" v-for="item in uploadCJList">
                                        <img :src="item.imgUrl">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        </div>
                                    </div>
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                    </Modal>
                                </template>
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col class='small-title' span="2" >
                                合同图片
                            </i-col>
                        </Row>
                        <Row span="24">
                            <i-col span="3">
                                <FormItem label="合同图片：" prop="img_url" label-position="left" :label-width="150">
                                </FormItem>
                            </i-col>
                            <i-col span="21">
                                <template>
                                    <div class="demo-upload-list" v-for="item in contractList">
                                        <img :src="item.imgUrl">
                                        <div class="demo-upload-list-cover">
                                            <Icon type="ios-eye-outline" @click.native="handleView(item.imgUrl)"></Icon>
                                        </div>
                                    </div>
                                    <Modal title="查看图片" v-model="visible">
                                        <img :src="imgViewUrl" v-if="visible" style="width: 100%">
                                    </Modal>
                                </template>
                            </i-col>
                            
                            
                            
                        </Row>
                        
                        <FormItem style='margin-top:100px;'>
                            <!--
                            <Button :disabled="hasSubmit" @click="updateData" style="width:100px;" type="primary">提交</Button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
                            <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
    </div>
    
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'setintentionalorder',
    data () {
        return {
            imgViewUrl:'',
            visible: false,
            isupload:true,//判断是否可以正常上传图片
            pay_data:[],//订单付款记录信息
            uploadList: [],//验车图片-前车
            uploadCJList: [],//验车图片-车架图片
            uploadZCList:[],//验车图片-左侧图片
            uploadCWList:[],//验车图片-车尾图片
            uploadYCList:[],//验车图片-右侧图片
            uploadZYList:[],//验车图片-座椅图片
            contractList:[],//合同图片
            orderNo:'',//订单编号
            offerId:'',//发布寻车编号
            userId:'',//当前登录者的编号
            orderData: {
                id:'',
                order_no:'',
                source_id:'',
                source_brand: '',
                source_model:'',
                user_id:'',
                user_name:'',
                user_phone:'',
                STATUS:'',
                intention_money:'',
                province:'',
                city:'',
                guidance_price:0,
                price:0
            },
            offerfollowData:{},
            hasSubmit: false,
            pay_columns: [
                    {
                        title: '支付方式',
                        align: 'center',
                        key: 'payType',
                        render: (h, params) => {
                            if (params.row.payType === 1) {
                                return h('span', '支付宝')
                            }else if(params.row.payType === 2) {
                                return h('span', '微信')
                            }
                        }
                    },
                    {
                        title: '支付编号',
                        align: 'center',
                        key: 'payNo'
                    },
                    {
                        title: '充值用途',
                        align: 'center',
                        key: 'useWay',
                        render: (h, params) => {
                            if (params.row.useWay === 1) {
                                return h('span', '意向金')
                            }else {
                                return h('span', '其他')
                            }
                        }
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'status',
                        render: (h, params) => {
                            if (params.row.status === 0) {
                                return h('span', '未支付')
                            }else if(params.row.status === 1) {
                                return h('span', '支付成功')
                            }else if(params.row.status === 2) {
                                return h('span', '支付失败')
                            }else if(params.row.status === 3) {
                                return h('span', '退款中')
                            }else if(params.row.status === 4) {
                                return h('span', '已退款')
                            }
                        }
                    },
                    {
                        title: '金额',
                        align: 'center',
                        key: 'price'
                    },
                    {
                        title: '支付时间',
                        align: 'center',
                        key: 'crtTime'
                    }
                ]
        }
    },
    methods: {
        // 数据初始化
        init () {
            var userId = window.localStorage.getItem('userId')
            this.userId = userId
            this.$store.commit('setActiveName', 'intentionalorderindex');
            var id = this.$route.params.id;
            this.orderNo = this.$route.params.id;
            this.selectCheckOrderById(id);

        },
        selectCheckOrderById(id){
            var _that = this;
            var url = 'adminlogin/carorder/selectCheckOrderById';
            var data = {
                orderId: id
            };
            ajax.formRes(url, data).then(function (res) {
                if (200 == res.code) {
                    _that.orderData = res.data
                    _that.offerfollowData = res.offerfollow
                    _that.offerId = res.offerId
                    _that.pay_data = res.payData
                    _that.contractList = []
                    res.orderPictures.forEach(function (c) {
                        let picture = {}
                        picture.imgUrl = c.path
                        _that.contractList.push(picture);
                    })
                    res.pictures.forEach(function (c) {
                        if(c.ord === 1){
                            let cj = {}
                            cj.imgUrl = c.picturepath
                            _that.uploadCJList.push(cj);
                        }else if(c.ord === 2){
                            let qc = {}
                            qc.imgUrl = c.picturepath
                            _that.uploadList.push(qc);
                            
                        }else if(c.ord === 3){
                            let zc = {}
                            zc.imgUrl = c.picturepath
                            _that.uploadZCList.push(zc);
                            
                        }else if(c.ord === 4){
                            let cw = {}
                            cw.imgUrl = c.picturepath
                            _that.uploadCWList.push(cw);
                            
                        }else if(c.ord === 5){
                            let yc = {}
                            yc.imgUrl = c.picturepath
                            _that.uploadYCList.push(yc);
                            
                        }else if(c.ord === 6){
                            let zy = {}
                            zy.imgUrl = c.picturepath
                            _that.uploadZYList.push(zy);
                            
                        }
                    })
                } else {
                    _that.$Message.success('数据原因，请联系管理员。');
                }
            }).catch(function (res) {
                console.log('有错误信息');
            });
        },
        //新增车源
        addCarSource(){
           this.$store.commit('setActiveName', 'carsourceindex');
        },
        handleView (url) {
            this.imgViewUrl = url;
            this.visible = true;
        },
        handleRemove (f,pictureType) {
            let _that = this;
            if(pictureType === 1){
                 _that.uploadCJList.splice(_that.uploadCJList.indexOf(f),1);
            } else if (pictureType === 2){
                _that.uploadList.splice(_that.uploadList.indexOf(f),1);
            } else if (pictureType === 3){
                _that.uploadZCList.splice(_that.uploadZCList.indexOf(f),1);
            } else if (pictureType === 4){
                _that.uploadCWList.splice(_that.uploadCWList.indexOf(f),1);
            } else if (pictureType === 5){
                _that.uploadYCList.splice(_that.uploadYCList.indexOf(f),1);
            } else if (pictureType === 6){
                _that.uploadZYList.splice(_that.uploadZYList.indexOf(f),1);
            }
        },
        handleSuccess (res, file) {
            // 因为上传过程为实例，这里模拟添加 url
            file.url = this.imgUrl;
            file.name = this.imgName;
           
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
            //设置图片是否可以正常上传
            this.isupload = false;
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
            this.isupload = false;
        },
        handleUpload (file) {
            if(this.isupload){
                this.file = file
                this.upload(2)
            }
        },
        handleCWUpload(file) {
            if(this.isupload){
                this.file = file
                this.upload(4)
            }
        },
        handleZCUpload(file) {
            if(this.isupload){
                this.file = file
                this.upload(3)
            }
        },
        handleYCUpload(file) {
            if(this.isupload){
                this.file = file
                this.upload(5)
            }
        },
        handleZYUpload(file) {
            if(this.isupload){
                this.file = file
                this.upload(6)
            }
        },
        handleCJUpload(file) {
            if(this.isupload){
                    this.file = file
                    this.upload(1)
                }
        },
        // 上传图片
        upload (pictureType) {
            let that = this
            let fileName = that.file.name
            //FormData 对象
            let formData = new FormData()
            console.log(fileName)
            this.uploadLoading = true
            // 文件对象
            formData.append("img", that.file)
            formData.append("type", "order")
            ajax.upload('adminlogin/file/uploadOssImage',formData).then(function (res) {
                that.updatePicture(pictureType,res.url)
                if(pictureType === 1){
                    that.uploadCJList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadCJList.push(yc);
                } else if (pictureType === 2){
                    that.uploadList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadList.push(yc);
                } else if (pictureType === 3){
                    that.uploadZCList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadZCList.push(yc);
                } else if (pictureType === 4){
                    that.uploadCWList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadCWList.push(yc);
                } else if (pictureType === 5){
                    that.uploadYCList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadYCList.push(yc);
                } else if (pictureType === 6){
                    that.uploadZYList.splice(0,1);
                    let yc = {}
                    yc.imgUrl = res.url
                    that.uploadZYList.push(yc);
                }           
            }, function (err) {
                console.log(err)
            }).catch(function (error) {
                console.log(error)
            })
        },
        //修改上传的图片 
        updatePicture (type,picUrl) {
            let _that = this
            var url = 'adminlogin/carorder/updatePicture';
            var data = {
                offerId:_that.offerId,
                type:type,
                picUrl:picUrl
            };
            ajax.formRes(url, data).then(function (res) {
                if (200 == res.code) {
                } else {
                    _that.$Message.success('数据原因，请联系管理员。');
                }
            }).catch(function (res) {
                console.log('有错误信息');
            });
        },
        // 修改数据
        updateData () {
            let that = this
        },
        goBack () {
            this.$router.push({
                name: 'intentionalorderindex'
            })
        }
        
    },
    created: function () {
        this.init()
    },
    activated: function () {
        this.init()
    }
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .small-title{
        font-style: normal;
        font-weight: bold;
        font-size:14px;
    }
</style>

